<!DOCTYPE html>
<html>
<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<title>角色列表</title>


	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">

	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="/res/sa.js"></script>
</head>
<body>
<div class="vue-box">
	<el-table
			:data="tableData"
			@selection-change="handleSelectionChange"
			ref="multipleTable"
			style="width: 100%"
			tooltip-effect="dark">
		<el-table-column
				type="selection"
				width="55">
		</el-table-column>
		<el-table-column
				label="编号"
				prop="id"
				width="120">
		</el-table-column>
		<el-table-column
				label="角色名称"
				prop="name"
				width="120">
		</el-table-column>
		<el-table-column
				label="角色描述"
				prop="desc"
				show-overflow-tooltip>
		</el-table-column>
	</el-table>

	<br>
	<div class="c-item">
		<el-button @click="submitData" size="mini" type="primary">确定</el-button>
	</div>
</div>
<script type="text/javascript">
    let userid = sa.$util.getUrlArgs('userid');
    let tablevm = new Vue({
        el: '.vue-box',
        data: {
            tableData: [],
            selectedData: [],
            multipleSelection: []
        },
        methods: {
            submitData: function (arg) {
                console.log(this.multipleSelection);
                let roleids = [];
                this.multipleSelection.forEach(function (role) {
                    roleids.push(role.id);
                });
                sa.put('/role/byuser', JSON.stringify({userid: userid, roleids: roleids}), function (res) {
                    if (res && res.state && res.data) {
                        layer.alert('成功', {}, function () {
                            if (parent != window) {
                                parent.layer.closeAll('iframe');
                            }
                            layer.closeAll();
                        });
                    }
                }.bind(this));
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
        created: function () {
            sa.get('/role', {}, function (res2) {
                if (res2 && res2.state) {
                    console.log(res2.data);
                    let data = JSON.parse(JSON.stringify(res2.data));
                    this.tableData = data;
                }
            }.bind(this));
        },
        mounted: function () {
            sa.get('/role/byuser', {userid: userid}, function (res) {
                if (res && res.state) {
                    let checked = res.data;
                    if (checked) {
                        checked.forEach(function (row) {
                            this.tableData.forEach(function (trow) {
                                if (trow.id === row.id) {
                                    this.$refs.multipleTable.toggleRowSelection(trow, true);
                                }
                            }.bind(this))
                        }.bind(this))
                    }
                }
            }.bind(this));
        }
    });
</script>
</body>